<template>
  <div class="oe-mem-managemnet" style="margin-top: 20px;" v-loading="loading">
    <topTip :roleId="roleId"></topTip>
    <div class="mem-management-list">
      <div class="mem-list-top clearfix">
        <span>姓名/工号：</span>
        <a-input style="width: 180px" class="top-right" v-model="name" placeholder="请输入姓名或工号" />
        <a-select
          showSearch
          placeholder="请选择院系"
          v-model="schoolName"
          optionFilterProp="children"
          style="width: 200px;margin-bottom:20px;margin-left: 15px;"
          :allowClear="true"
          :filterOption="false"
          @search="handleSearch"
          @change="handleChange"
          @focus="handleFocus"
        >
          <a-select-option v-for="(item, index) in schoolList" :index="index" :key="item.id">
            {{ item.text }}
          </a-select-option>
        </a-select>
        <a-button class="top-right" type="primary" @click="getTeaList">查询</a-button>
        <a-button class="top-right" type="primary" @click="showModal" v-if="operationList.includes('add/edit/del:member')"
          >新增</a-button
        >
        <a-button class="top-right oe-btn-delete" @click="getDelRoleUser" v-if="operationList.includes('add/edit/del:member')"
          >批量删除</a-button
        >
      </div>
      <div class="role-list-table">
        <a-table
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :dataSource="data"
          :pagination="pagination"
        >
          <template slot="operation" slot-scope="text, record" v-if="operationList.includes('add/edit/del:member')">
            <span>
              <a @click="getDel(record)">
                <a-tooltip placement="bottom">
                  <template slot="title">
                    <span>删除</span>
                  </template>
                  <i style="color:#F56353;" class="iconfont icon-delete"></i>
                </a-tooltip>
              </a>
            </span>
          </template>
        </a-table>
      </div>
    </div>
    <a-modal
      title="添加成员"
      v-model="visible"
      @cancel="handleCancel"
      @ok="handleOk"
      wrapClassName="modal-warning"
      okText="确定"
      cancelText="取消"
      width="820px"
    >
      <div class="modal-top">
        <span>选择院系：</span>
        <a-select
          showSearch
          placeholder="请选择院系"
          v-model="schoolName"
          optionFilterProp="children"
          style="width: 200px;margin-bottom:20px;margin-right: 15px;"
          :allowClear="true"
          :filterOption="false"
          @search="handleSearch"
          @change="handleChange"
          @focus="handleFocus"
        >
          <a-select-option v-for="(item, index) in schoolList" :index="index" :key="item.id">
            {{ item.text }}
          </a-select-option>
        </a-select>
        <span>姓名/工号：</span>
        <a-input
          style="width: 160px"
          class="top-right"
          v-model="name"
          placeholder="请输入姓名或工号"
          @keyup.13="getTeaList"
        />
        <a-button style="margin-left:10px;" class="top-right" type="primary" @click="getTeaList">查询</a-button>
      </div>
      <div class="model-list-table">
        <a-table
          :rowSelection="{ selectedRowKeys: selectedRowKeysModel, onChange: onSelectChangeModel }"
          :columns="columnsModel"
          :dataSource="dataModel"
          :pagination="paginationModel"
        >
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script>
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  components: {
    topTip
  },
  mixins: [GetOperationList],
  props: {
    roleId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      getType: 0,
      name: '',
      subId: '',
      sort: '',
      pagination: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          this.getTeaList();
        },
        onChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          this.getTeaList();
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0
      },
      data: [],
      columns: [
        { title: '序号', dataIndex: 'number', align: 'center' },
        { title: '姓名', dataIndex: 'DisplayName', align: 'center' },
        { title: '用户名', dataIndex: 'UserName', align: 'center' },
        { title: '工号', dataIndex: 'UserNo', align: 'center' },
        { title: '院系', dataIndex: 'SubName', align: 'center' },
        { title: '操作', dataIndex: 'operation', width: '100px', scopedSlots: { customRender: 'operation' }, align: 'center'}
      ],
      paginationModel: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showQuickJumper: false,
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.paginationModel.current = current;
          this.paginationModel.pageSize = pageSize;
          this.getTeaList();
        },
        onChange: (current, pageSize) => {
          this.paginationModel.current = current;
          this.paginationModel.pageSize = pageSize;
          this.getTeaList();
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0
      },
      dataModel: [],
      columnsModel: [
        { title: '序号', dataIndex: 'number' },
        { title: '姓名', dataIndex: 'DisplayName' },
        { title: '用户名', dataIndex: 'UserName' },
        { title: '工号', dataIndex: 'UserNo' },
        { title: '院系', dataIndex: 'SubName' }
      ],
      selectedRowKeys: [],
      selectedRowKeysModel: [],
      loading: false,
      visible: false,
      school: null,
      schoolList: [],
      schoolName: undefined,
      addIds: [],
      // 操作List
      operationList: [],
      // 、操作list
      IsOpList: []
    };
  },
  computed: {},
  mounted() {
    // this.getTeaList();
    // this.getSchoolList();
    this.getOpeartion();
  },
  methods: {
    // 获取页面操作
    getOpeartion() {
      this.loading = true;
      this.GetOperationList().then((rst) => {
        this.loading = false;
        this.operationList = [];
        this.IsOpList = [];
        if (rst.code === 1) {
          if (rst.list.length) {
            rst.list.forEach((item) => {
              if(item.IsWrite){
              this.operationList.push(item.Name);
              }
            });
            this.IsOpList = rst.list;
            // this.operationList = rst.list;
          }
          this.getTeaList();
          this.getSchoolList();
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    // 判断是否是只读
    getIsWrite(type) {
      type = 'add/edit/del:member';
      let index = this.IsOpList.findIndex((el) => {
        return el.Name === type;
      });
      if (index > -1) {
        if (this.IsOpList[index].IsRead && !this.IsOpList[index].IsWrite) {
          this.$message.info('您没有该操作权限！');
          return false;
        } else {
          return true;
        }
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
    },
    getDelRoleUser() {
      if (!this.getIsWrite('批量删除')) {
        return;
      }
      this.loading = true;
      this.$http
        .post('/api/SchoolManager/rolemenu/delRoleUser', {
          ids: this.selectedRowKeys //要删除的成员id数组
        })
        .then((res) => {
          this.loading = false;
          if (res.code > 0) {
            this.$message.success(res.msg);
            this.getTeaList();
            this.selectedRowKeys = [];
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    getDel(data) {
      if (!this.getIsWrite('删除')) {
        return;
      }
      var Id = [data.Id];
      this.loading = true;
      this.$http
        .post('/api/SchoolManager/rolemenu/delRoleUser', {
          ids: Id //要删除的成员id数组
        })
        .then((res) => {
          this.loading = false;
          if (res.code > 0) {
            this.$message.success(res.msg);
            this.getTeaList();
            this.selectedRowKeys = [];
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    onSelectChangeModel(selectedRowKeys, selectedRows) {
      this.selectedRowKeysModel = selectedRowKeys;
      this.addIds = selectedRowKeys;
    },
    showModal() {
      if (!this.getIsWrite('新增')) {
        this.getTeaList()
        return;
      }
      this.schoolName = undefined;
      this.name = '';
      this.getType = 1;
      this.visible = true;
      this.getTeaList();
    },
    handleOk(e) {
      this.$http
        .post('/api/SchoolManager/rolemenu/saveRoleUser', {
          roleId: this.roleId, //角色Id
          userIds: this.addIds //用户Id数组
        })
        .then((res) => {
          if (res.code > 0) {
            this.$message.success(res.msg);
            this.addIds = [];
            this.handleCancel();
            this.selectedRowKeysModel = [];
          } else {
            this.$message.error(res.msg);
          }
        });
    },
    handleCancel() {
      this.name = '';
      this.schoolName = undefined;
      this.getType = 0;
      this.selectedRowKeysModel = [];
      this.getTeaList();
      this.visible = false;
    },
    getTeaList() {
      this.loading = true;
      var pageSize = 10;
      var current = 1;
      if (this.getType == 0) {
        pageSize = this.pagination.pageSize;
        current = this.pagination.current;
      } else if (this.getType == 1) {
        pageSize = this.paginationModel.pageSize;
        current = this.paginationModel.current;
      }
      this.$http
        .post('/api/schoolManager/rolemenu/getTeaList', {
          getType: this.getType, //0,获取成员列表 1，获取要新增的成员列表
          roleId: this.roleId, //角色Id
          key: this.name, //教师姓名，工号，用户名查询
          subId: this.schoolName, //院系Id
          sort: this.sort, //排序 正序直接传某一个参数，倒序在前面加一个"-"(参数内容为：DisplayName,UserName,SubName,UserNo,DateCreated)
          pageSize: pageSize, //每页多少条
          page: current
        })
        .then((res) => {
          if (res.code > 0) {
            if (this.getType == 0) {
              this.data = [];
              this.pagination.total = res.pagination.totalCount;
              if (res.list.length) {
                res.list.forEach((item, index) => {
                  let number = (res.pagination.pageIndex - 1) * res.pagination.pageSize + index + 1;
                  this.data.push({
                    ...item,
                    key: item.Id,
                    number: number
                  });
                });
              }
            } else if (this.getType == 1) {
              this.dataModel = [];
              if (res.list.length) {
                res.list.forEach((item, index) => {
                  let number = (res.pagination.pageIndex - 1) * res.pagination.pageSize + index + 1;
                  this.dataModel.push({
                    ...item,
                    key: item.Id,
                    number: number
                  });
                });
              }
              this.paginationModel.total = res.pagination.totalCount;
            }
          } else {
            this.$message.error(res.msg);
          }
          this.loading = false;
        });
    },
    handleSearch(value) {
      this.schoolName = value;
      this.getTeaList();
    },
    handleChange(value) {
      this.schoolId = value;
      this.getTeaList();
    },
    handleFocus() {
      this.schoolName = undefined;
      this.getTeaList();
    },
    getSchoolList() {
      this.$http
        .post('/api/common/localstorage/getESSubList', {
          q: this.schoolName
        })
        .then((res) => {
          this.schoolList = res.list;
        });
    }
  }
};
</script>
